<template>
  <div class="pull-down"  :class="lang === 'en-us' ? 'pull-down-en' : ''"
    @click="show = false">
    <div class="pull-down-text" @click.stop="show = !show">
      <input readonly class="pull-down-input" type="text" :value="selectText" />
      <div class="pull-down-icon" :class="[show ? 'icon_bot' : 'icon_top']"></div>
    </div>

    <transition name="fade">
      <ul v-show="show" class="pull-down-list">
        <li class="pull-down-list-item" 
          :class="{ active: item.key === selectKey }" 
          v-for="(item, inx) in optionList" :key="inx" 
          @click.stop="handleItem(item)">
          <p>
            <span>{{ item.label }}</span>
          </p>
        </li>
      </ul>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, onMounted } from 'vue';

interface Option {
  key: string;
  label: string;
}

interface Props {
  options: Option[];
  width: number | string;
  select?: number | string;
  isAll?: boolean;
  all?: string;
}

// 定义 props 和 emits
const props = defineProps<Props>();
const emit = defineEmits();

// State
const show = ref(false);
const lang = ref(localStorage.getItem("language"));

// 计算属性
const optionList = computed(() => {
  const list = JSON.parse(JSON.stringify(props.options));
  if (props.isAll) {
    const obj = {
      id: "all",
      key: "all",
      label: props.all,
    };
    list.unshift(obj);
  }
  return list;
});

const selectKey = computed(() => {
  const selectID = props.select;
  let text = optionList.value[0]?.key || ""; // 默认值
  optionList.value.forEach((item: any) => {
    if (item.key === selectID) {
      text = item.key;
    }
  });
  return text;
});

const selectText = computed(() => {
  if (props.select) {
    for (const item of optionList.value) {
      if (item.key === props.select) {
        return item.label;
      }
    }
  }
  // return optionList.value[0]?.label || ""; // 默认值
});

// 方法
const handleItem = (item: Option) => {
  show.value = false;
  emit("select-item", item);
};

onMounted(() => {
  document.addEventListener("click", () => {
    if (show.value) show.value = false;
  });
});
</script>

<style lang="less" scoped>
.pull-down {
  height: 100%;
  width: 100%;
  position: relative;
}

.pull-down-text {
  width: calc(100% - 0.32rem);
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 0.16rem;
  background: #fff;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 0.17rem;
    height: 100%;
    background: url("../assets/images/pulldown/pull_left.png") no-repeat left bottom/100%;
    position: absolute;
    left: -0.17rem;
  }

  &::after {
    content: "";
    display: block;
    width: 0.17rem;
    height: 100%;
    background: url("../assets/images/pulldown/pull_right.png") no-repeat left bottom/100%;
    position: absolute;
    right: -0.17rem;
  }
}

.pull-down-input {
  width: 100%;
  height: 100%;
  font-size: 13px;
  color: #767676;
  background: rgba(0, 0, 0, 0);
  border: none;
}

.pull-down-icon {
  display: block;
  width: 19px;
  height: 19px;
  position: absolute;
  right: 7px;
}

.icon_top {
  background: url("../assets/images/pulldown/arrow_right.png") no-repeat center center/100%;
  transform: rotate(90deg);
}

.icon_bot {
  background: url("../assets/images/pulldown/arrow_right.png") no-repeat center center/100%;
  transform: rotate(270deg);
}

.pull-down-list {
  width: calc(100% - 8px);
  padding: 7px 1px;
  background: #fff;
  border-radius: 4px;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 42px;
}

.pull-down-list-item {
  height: 33px;
  font-size: 13px;
  font-weight: 400;
  color: #767676;
  padding: 0 23px 0 10px;
  display: flex;
  justify-content: center;
  position: relative;

  &.active {
    &::after {
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      background: url("../assets/images/pulldown/pulldown_check.png") no-repeat left top;
      background-size: 100%;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>